<template>
    <div id="app">
        <div id="cover"></div>
        <Header></Header>
        <p>{{fullName}} {{counter}}</p>
        <!--<p>{{textA}} {{textPlus}}</p>-->
        <!--<p>{{textC}} {{textPlus}}</p>-->
        <!--<router-link to="/app">app</router-link>
        <router-link to="/app/123">app123</router-link>
        <router-link to="/app/456">app456</router-link>
        <router-link to="/login">login</router-link>-->
        <!--<Todo></Todo>-->
        <!-- vue-router 内置的组件 -->

        <!-- transaction 过度效果 -->
        <transition name="fade">
          <router-view/>
        </transition>
        <button @click="notify">click</button>
        <!--<notification content="test notify" />-->
        <Footer></Footer>
        <!--<router-view name="a"/>-->
    </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapActions,
  mapMutations
} from 'vuex'
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import Todo from './views/todo/todo.vue'

// console.log(Header.__docs)

export default {
    metaInfo: {
      title: 'Jocky\'s Todo App'
    },
    components: {
        Header,
        Footer,
        // Todo
    },
    methods: {
      ...mapActions(['updateCountAsync']),//, 'a/add', 'b/testAction']),
      ...mapMutations(['updateCount']),//, 'a/updateText'])
      notify(){
        this.$notify({
          content: 'test $notify',
          btn: 'close'
        })
      }
    },
    mounted () {
      // console.log(this.$store)
      // this.$store.state.count = 3
      //dispatch 是用来触发actions的
      // this.updateCountAsync({
      //   num: 5,
      //   time: 2000
      // })
      // this['a/add']()
      // this.testAction()
      // this['b/testAction']()

      // let i = 1
      // setInterval(() => {
      //   //调用mutation 是store里面的一个方法
      //   this.updateCount({
      //     num: i++,
      //     num2: i++
      //   })
      // }, 1000)
    },
    computed: {
      // textA(){
      //   return this.$store.state.b.text
      // },
      // 默认不支持语法 需要安装
      // npm i babel-preset-stage-1 -D
      ...mapState({
        //不同名  需要映射
        counter: 'count',
        // counter: (state) => state.count
        // textA: state => state.a.text,
        // textC: state => state.c.text
      }),
      ...mapGetters({
        fullName: 'fullName',
        // textPlus: 'a/textPlus'
      })
      // fullName(){
      //   return this.$store.getters.fullName
      // }
    }
}
</script>

<style lang="stylus" scoped>
#app
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    #cover
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        background-color #999
        opacity 0.2
        z-index -1

</style>
